<template>
  <view class="search">
    <u-search :showAction="true" actionText="搜索" :animation="true" bgColor="#e8e8e8" v-model="keyword" height="70rpx" @change="keywordChange" @custom="search"></u-search>
    
    <!-- 历史搜索记录 -->
    <view class="history">
      <span class="search_history">
        <p>搜索历史</p>
        <uni-icons type="trash-filled" size="25" @click="clearKeyword"></uni-icons>
      </span>
      <ul @click="historyItem" class="history_list">
        <li class="search_item" v-for="(item,index) in history" :key="index" :data-keyword="item">{{item}}</li>
      </ul>
    </view>
    
    <!-- 模糊搜索 -->
    <ul class="search_list"  v-if="keyword" @click="keywordClick">
      <li class='search_item' v-for="item in searchList" :key="item.class_id" :data-class_name="item.class_name">{{item.class_name}}</li>
    </ul>
    
    <!-- 课程 -->
    <ul @click="toClass" class="class_list" v-show="!keyword">
      <li class="class_item item-mask" v-for="item in classList" :key="item.class_id" :data-class_id="item.class_id">
        <view class="container">
          <image :src="item.class_image_src"></image>
          <span>
            <p>{{item.class_name}}</p>
            <p>{{item.class_introduce}}</p>
          </span>
        </view>
      </li>
    </ul>
    
    <!-- 状态为空 -->
    <u-empty
            mode="search"
            icon="http://cdn.uviewui.com/uview/empty/search.png"
            v-if="classList.length ===0"
    >
    </u-empty>
  </view>
</template>

<script>
import {keywordChange,
  search,
  clearKeyword,
  historyItem,
  keywordClick,
  searchClass,
  keywordInit} from '@/utils/search.js'
  import {toClass} from '@/utils/common.js'
  export default {
    data() {
      return {
        // 关键词
        keyword: '',
        // 历史记录数据
        history: ['12312', 'afaf'],
        // 定时器
        timerout: null,
        // 索引数据
        searchList: [],
        // 索引的课程数据
        classList: []
      };
    },
    methods: {
      // 搜索框内容改变的回调
      keywordChange(){
        return keywordChange(this)
      },
      search() {
        return search(this)
      },
      clearKeyword() {
        return search(this)
      },
      historyItem(e) {
        return historyItem({_this:this,data:e.target.dataset})
      },
      keywordClick(e) {
        return keywordClick({_this:this,data:e.target.dataset})
      },
      toClass(e) {
        return toClass(e.target.dataset.class_id)
      },
      searchClass(className){
        return searchClass({_this:this,className})
      },
      keywordInit(key) {
        return keywordInit({_this:this,key:key})
      }
    }
  }
</script>

<style lang="less">
  page {
    background-color: #fff;
  }

  .search {
    position: relative;
    .history {
      padding: 60rpx 20rpx 0 20rpx;

      .search_history {
        display: flex;
        justify-content: space-between;

        p {
          font-size: 30rpx;
          color: #aaaaaa;
        }
      }
      .history_list {
        padding-top: 30rpx;
        display: flex;
        .search_item {
          margin: 0 10rpx;
          padding: 15rpx 15rpx;
          border-radius: 20rpx;
          border: 2rpx solid #e2e2e2;
        }
      }
    }

    .search_list {
      position: absolute;
      padding: 10rpx 20rpx;
      width: 100%;
      // min-height: 400rpx;
      top: 80rpx;
      left: 0;
      background-color: #fff;
      box-sizing: border-box;
      .search_item {
        padding: 20rpx;
        border-bottom: 2rpx solid #e2e2e2;
        border-radius: 20rpx;
      }
    }
    .class_list {
      padding: 20rpx;
      .class_item {
        // 遮罩层
        position: relative;
        margin: 20rpx;
        padding: 20rpx;
        border-radius: 20rpx;
        background-color: #fff;
        border: 2rpx solid #e2e2e2;
        // 遮罩层
        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
        .container {
          display: flex;
          image {
            width: 180rpx;
            height: 140rpx;
          }
          span {
            margin-left: 10rpx;
          }
        }
      }
    }
  }
</style>
